<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            background-image: url(https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1BJVK6.img?w=327&h=485&m=6&x=117&y=126&s=90&d=90);
            background-repeat: no-repeat;
            background-size: 100%;
            background-position: 0px -520px;
            position: relative;
        }

        h1 {
            width: 500px;
            margin: auto;
            text-align: center;
        }

        div {
            width: 500px;
            height: 600px;
            background-color: rgba(10, 0, 0, 0.5);
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: 30px;
            margin-left: -250px;
            padding: 20px;
        }

        div>input {
            color: lightpink;
            margin-left: 80px;
            background-color: rgba(10, 0, 0, 0.3);
            border-radius: 15px;
            padding: 3px 10px;
            height: 20px;
            font-size: 15px;
        }

        div>span {
            color: pink;
            margin-top: 20px;
            margin-left: 30px;
            margin-bottom: 20px;
            display: inline-block;
            width: 70px;
            text-align: center;
        }

        label {
            margin-left: 100px;
        }

        button {
            font-size: 20px;
            color: palevioletred;
            background-color: pink;
            border-radius: 10px;
            border: none;
            width: 100px;
            height: 40px;
            position: absolute;
            top: 350px;
            left: 220px;
        }

        a {
            color: lightsalmon;
            position: absolute;
            right: 20px;
            top: 420px;
        }
    </style>
</head>

<body>
    <h1>登陆页面</h1>
    <div>
        <span>用户名</span><input type="text"><br>
        <span>密码</span><input type="password"><br>
        <span>手机号</span><input type="text"><br>
        <span>验证码</span><input type="text"><span onclick="yan()"></span><br>
        <label><input type="checkbox">记住密码</label>
        <label><input type="checkbox" >自动登录</label><br>
        <button onclick="load()">登录</button><br>
        <a href="#">忘记密码</a>
    </div>
    <script>

        var y = document.querySelectorAll("span")[4]
        function yan() {
            var a = Math.floor(Math.random() * 899999 + 100000)
            y.innerHTML = `${a}`
        }
        yan()

        var m = document.querySelectorAll("input")[3]
        function load() {
            if (m.value != y.textContent) {
                yan()
            }
        }

        var name = document.querySelectorAll("input")[0]
        var password = document.querySelectorAll("input")[1]
    </script>
</body>

</html>